<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 解构赋值
        // 一、数组的解构 
        // ES5 ： 
        // var arr  = ["张三","李四","王五",["王小二"]];
        // var name1 = arr[0];
        // var name2 = arr[1];
        // var name3 = arr[2];
        // var name4 = arr[3][0];
        // console.log(name1,name2,name3,name4);

        // ES6 解构赋值 
        // 直接解构 ，多层解构 
        // 1. 变量名称是自定义的 ，但是 顺序要对应上 。 2. 结构要和之前的数据保持一致
        // var arr  = ["张三","李四","王五",["王小二"]];
        // let [name1,name2,name3,[name4]] = arr;
        // console.log(name1,name2,name3,name4);


        // var [a,b,c] = [1,2,3,4];
        // console.log(c);
        // console.log(a,b,c);

        // var a = 10;
        // var b = 20;

        // // 交换变量
        // // var c = a;
        // // a = b;
        // // b = c;
        // // console.log(a,b);
        // var [b,a] = [a,b];
        // console.log(a,b);


        // 参数的数组解构 

        // 传参的同时 解构数组参数 ；
        // function fn([a,b,c]){
        //     // console.log(arr);
        //     console.log(a,b,c);
            
        // }

        // fn([1,2,3]);




        // 二、对象的解构 
        // var obj = {
        //     myname:"张三",
        //     age:20,
        //     height:"178cm"
        // }

        // ES5 获取属性值 
        // var myname = obj.myname;
        // var age = obj.age;
        // var height = obj.height;
        // console.log(myname,age,height)

        // ES6 对象的解构 

        // 一层解构 
        // let {myname:myname1,age:myage,height:myheight} = obj;
        // console.log(myname1,myage,myheight);

        // 多层对象结构 
        // var obj  = {
        //     name:"张三",
        //     age:20,
        //     hobby:{
        //         one:"篮球",
        //         two:"足球"
        //     },
        //     arr:[1,2,3]
        // }

        // let {name:myname,age:myage,hobby:{one:myone,two:mytwo},arr:[a,b,c]} = obj;
        // console.log(myname,myage,myone,mytwo,a,b,c);


        // 对象解构的简写 ；


        // var obj = {
        //     myname:"张三",
        //     age:20,
        //     height:"178cm"
        // }

        // // 普通的解构 ，把键名和键值解构出来 ；
        // // let {myname:myname,age:age,height:height} = obj;

        // // 键名和键值 需要一样 ，你可以省略一个 名称和 冒号
        // let {myname,age,height:myheight} = obj;
        // console.log(myname,age,myheight);



        // 对象解构用于 参数 

        // function fn({myname,age}){  // 把对象参数 解构出来
        //     // console.log(obj);  
        //     // console.log(myname,myage)
        //     console.log(myname,age)
        // }

        // fn({myname:"张三",age:20})



    // 三、字符串的解构 
    //     var str = "abcdefg";
    //     // console.log(str[3]);
    //     // str[3] = "1"
    //     // console.log(str);
    // //    console.log(  str.length);
    //     let [a,b,c,d,e,f,g] = str;
    //     console.log(a,g);

    </script>
</body>
</html>